// Spacing
//
$width-gap: 14px !default;
$width-gap-double: 28px !default;
$width-gap-half: 7px !default;
 

@mixin flex-container() {
    display: flex;
    flex-flow: row nowrap;
}

@mixin flex-width($percentage) {
    flex-basis: $percentage;
    max-width: $percentage;
}

// ---- 

.flex-left,
.flex-center,
.flex-right,
.flex-top,
.flex-middle,
.flex-bottom,
.flex-vertical {
  @include flex-container();
}

.flex-left,
.flex-center,
.flex-right,
.flex-top,
.flex-middle,
.flex-bottom,
.flex-vertical.flex-left,
.flex-vertical.flex-center,
.flex-vertical.flex-right,
.flex-vertical.flex-top,
.flex-vertical.flex-middle,
.flex-vertical.flex-bottom {
  align-items: stretch;
  justify-content: flex-start;
}

.flex-center,
.flex-vertical.flex-middle {
  justify-content: center;
}

.flex-right,
.flex-vertical.flex-bottom {
  justify-content: flex-end;
}

.flex-top,
.flex-vertical.flex-left {
  align-items: flex-start;
}

.flex-middle,
.flex-vertical.flex-center {
  align-items: center;
}

.flex-bottom,
.flex-vertical.flex-right {
  align-items: flex-end;
}

.units-gap {
  margin-left: - $width-gap-half;
  margin-right: - $width-gap-half;

  > .unit,
  > .unit-0,
  > .unit-1-2,
  > .unit-1-3,
  > .unit-2-3,
  > .unit-1-4,
  > .unit-3-4, {
    padding-left: $width-gap-half;
    padding-right: $width-gap-half;
  }
}

.unit {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.unit-1-2,
.unit-1-3,
.unit-2-3,
.unit-1-4,
.unit-3-4 {
  flex-shrink: 0;
}

.unit-1-2 {
  @include flex-width(50%);
}

.unit-1-3 {
  @include flex-width(33.33%);
}

.unit-2-3 {
  @include flex-width(66.67%);
}

.unit-1-4 {
  @include flex-width(25%);
}

.unit-3-4 {
  @include flex-width(75%);
}

.flex-vertical {
  flex-direction: column;

  > .unit,
  > .unit-0,
  > .unit-1-2,
  > .unit-1-3,
  > .unit-2-3,
  > .unit-1-4,
  > .unit-3-4, {
    max-width: none;
  }

  > .unit-1-2 {
    max-height: 50%;
  }

  > .unit-1-3 {
    max-height: 33.33%;
  }

  > .unit-2-3 {
    max-height: 66.67%;
  }

  > .unit-1-4 {
    max-height: 25%;
  }

  > .unit-3-4 {
    max-height: 75%;
  }
}
